<template>
  <div class="taskcenter">
    <wtop></wtop>
    <div class="center">
      <div class="right">
        <div style="height: 16px; width: 100%; background: #EFEFEF;"></div>
        <div class="real-data" v-loading="dstloading">
          <div class="real-time-data">
            <div class="t-box">
              <div class="title">数据统计</div>
              <div class="leftbtn">
                <el-button :type="state == 1 ? 'primary' : ''" @click="searchdate('all')">全部</el-button>
                <el-button :type="state == 2 ? 'primary' : ''" @click="searchdate('month')">最近30天</el-button>
              </div>
            </div>
            <div class="flex">
              <div class="data-box">
                <div class="tit">参与任务数</div>
                <div class="num">-</div>
              </div>
              <div class="data-box">
                <div class="tit">累计拨打用户数</div>
                <div class="num">{{dst.amount}}</div>
              </div>
              <div class="data-box">
                <div class="tit">拨通用户数</div>
                <div class="num">{{dst.called_amount}}</div>
              </div>
              <div class="data-box">
                <div class="tit">拨通率</div>
                <div class="num">-</div>
              </div>
              <div style="height:60px; width: 1px; background: #D6D6D6;"></div>
              <div class="data-box">
                <div class="tit">平均拨打成本</div>
                <div class="num">-</div>
              </div>
              <div class="data-box">
                <div class="tit">平均通话时长</div>
                <div class="num">{{dst.avg_time}}s</div>
              </div>
              <div class="data-box">
                <div class="tit">目标达成数量</div>
                <div class="num">-</div>
              </div>
              <div class="data-box">
                <div class="tit">业务成功率</div>
                <div class="num">{{dst.success_rate}}%</div>
              </div>
            </div>
          </div>
          <!-- <div class="right-box">
            <div class="data-box" @click="downloadReport=true">
              <img class="order-icon" src="../../../static/img/waihu_6.png">
              <div class="tit">下载业绩结算表</div>
            </div>
          </div> -->
        </div>
        <div style="height: 16px; width: 100%; background: #EFEFEF;"></div>
        <div class="view" v-loading="loading">
          <div class="left-view" v-if="leftShow">
            <div class="title">我的任务</div>
            <div class="content">
              <div class="task" v-for="(item,index) in myTask" :key="index">
                  <div class="tit">{{item.type_name}}</div>
                  <div class="msg-box">
                    <div class="oh">{{item.name}}</div>
                    <div class="msg-btn">
                      <el-button type="success" round @click="toCall(item.id)">前往外呼</el-button>
                    </div>
                  </div>
                  <div class="progress">进度：{{item.my_done}}/{{item.my_count}}<div style="display: inline-block;margin-left: 20px;">任务总数：{{item.count}}</div></div>
                  <div class="endTime" :class="item.isEnd? 'red': ''">截止时间：{{item.end_time}}</div>
              </div>
              <!-- <div class="task">
                  <div class="tit">宽带办理</div>
                  <div class="msg-box">
                    <div class="oh">XXXXXX宽带办理外呼</div>
                    <div class="msg-btn">
                      <el-button type="success" round  @click="toCall(1)">前往外呼</el-button>
                    </div>
                  </div>
                  <div class="progress">进度：0/236</div>
                  <div class="endTime">截止时间：2020-3-23</div>
              </div> -->
            </div>
          </div>
          <div v-if="leftShow" style="width: 16px; background: #EFEFEF;"></div>
          <div class="right-view">
            <div class="title" style="display: flex; justify-content: space-between; padding-right: 20px;">
              <div>任务大厅</div>
              <el-select v-model="urgency" @change="change" size="mini" placeholder="请选择紧急程度">
                <el-option label="普通" value="1"></el-option>
                <el-option label="较高" value="2"></el-option>
                <el-option label="很高" value="3"></el-option>
              </el-select>
            </div>

            <div class="content">
              <!-- <div class="task" v-for="(item,index) in fixedList" :key="index">
                <div class="oh msg warning">{{item.name}}</div>
                <div>{{item.type_name}}</div>
                <div>{{item.count_order}}条</div>
                <div class="endTime">截止时间：{{item.end_time}}</div>
                <div class="msg-btn">
                  <el-button type="warning" round @click="toCallOrder(item.id)">前往外呼</el-button>
                </div>
              </div> -->
              <!-- <div class="task" v-for="(item,index) in orderList" :key="item.id">
                <div style="width: 80px;">任务ID：{{item.id}}</div>
                <div class="oh msg" :class="item.is_main_task == 0 ? 'danger' : 'warning'">{{item.name}}</div>
                <div>{{item.type_name}}</div>
                <div>{{item.count}}条</div>
                <div class="endTime">创建时间：{{item.created_at}}</div>
                <div class="msg-btn">
                  <el-button :type="item.is_main_task == 0 ? 'danger' : 'warning'" round @click="toCallOrder(item.id)">前往外呼</el-button>
                </div>
              </div> -->
              <div class="task" v-for="(item,index) in taskAll" :key="index" >
                <div style="width: 80px;">任务ID：{{item.id}}</div>
                <div class="oh msg">{{item.name}}</div>
                <div>{{item.type_name}}</div>
                <div>{{item.count}}条</div>
                <div class="endTime">截止时间：{{item.end_time}}</div>
                <div class="msg-btn">
                  <el-button type="primary" v-if="item.flag == 2" round @click="toCall(item.id)">前往外呼</el-button>

                  <el-button type="warning" v-if="item.flag == 1 && item.is_main_task == 1" round @click="toCallOrder(item.id)">订单外呼</el-button>
                  <el-button type="danger" v-if="item.flag == 1 && item.is_main_task != 1" round @click="toCallOrder(item.id)">订单外呼</el-button>
                  <!-- <el-button :type="item.is_main_task == 0 ? 'danger' : 'warning'" round @click="toCallOrder(item.id)">前往外呼</el-button> -->
                </div>
              </div>
              <!-- <div class="task">
                <div class="oh msg">XXXXXX宽带办理外呼</div>
                <div>宽带办理</div>
                <div>236条</div>
                <div class="endTime">截止时间：2020-3-23</div>
                <div class="msg-btn">
                  <el-button type="success" round  @click="toCall(1)">前往外呼</el-button>
                </div>
              </div> -->
            </div>
          </div>

        </div>

      </div>
    </div>
    <el-dialog title="选择日期" :visible.sync="downloadReport" :close-on-click-modal="false" width="600px">
        <div>
          <div style="margin-top: 20px;">选择日期：<el-date-picker v-model="time" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" placeholder="选择日期时间"></el-date-picker></div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="downloadReport = false">取 消</el-button>
          <el-button type="primary" @click="downloadTask">确 定</el-button>
        </span>
    </el-dialog>
    <wfoot></wfoot>
  </div>
</template>

<script>
	import axios from 'axios'
	import wtop from '@/components/callsystem/wtop.vue'
  import wfoot from "@/components/callsystem/wfoot.vue";
  import moment from 'moment'
	export default{
		components: {
			wtop: wtop,
      wfoot: wfoot
		},
		name : "taskCenter",
		data(){
			return {
        srclogo:"./static/img/wh_icon1.png",
        loading: true,
        dstloading: false,
        state: 1,
        dst: {
          amount: 0,
          called_amount: 0,
          avg_time: 0,
          success_rate: 0
        },
        month: '',
        myTask: [],
        taskAll:[],
        orderList: [],
        leftShow: true,
        downloadReport: false,
        time:[],
        url: '',
        urgency:""
			}
		},
		created() {
      this.url = window.location.origin
      this.statistics()
      this.getlist()
      
		},
		mounted(){

		},
		methods: {
      change:function(){
        this.loading = true
        this.getlist()
      },
      //下载报表
      downloadTask(){
        if(this.time == "" || this.time == undefined){
            this.$message('请选择下载日期！');
            return
        }
        let day = this.dateDay(this.time[0],this.time[1])
        if(day > 62){
          this.$message.error(`您选择了${day}天，目前最多只允许62天哟^_^`);
          return
        }
        var a = document.createElement("a");
        a.setAttribute("href", this.url+'/api/plan-market/call/order/total_data/export?start='+this.time[0]+'&end='+this.time[1]);
        a.click();
        this.downloadReport = false
      },
      //时间区间转天数
      dateDay(start,end){
       let day = new Date(end).getTime() - new Date(start).getTime()
       day = day/24/60/60/1000
       return day
      },
      //数据统计
      statistics(){
        var that = this
        this.dstloading = true
        axios.get('/api/plan-market/call/data?start='+this.month)
        	.then(response => {
        		if(response.data.msg.code == 0){
              that.dst = response.data.data
              that.dst.avg_time = Math.round(that.dst.avg_time)
              that.dst.success_rate =  Math.round(that.dst.success_rate*100);
              that.dstloading = false
        		}else{
        			that.$message.error(response.data.msg.info);
        		}
        	})
      },
      //日期查询
      searchdate(val){
        if(val == 'all'){
          this.state = 1
          this.month = ''
        }
        if(val == 'month'){
          this.state = 2
          this.month = moment().subtract(30, "days").format("YYYY-MM-DD");
        }
        this.statistics()
      },
      //获取列表
      getlist:function(){
          var that = this
          //订单外呼任务
          axios.get('/api/plan-market/call/task/order_task_create?flag=2')
            .then(response => {
              if(response.data.msg.code == 0){
                this.orderList = response.data.data.main_task
              }else{
                that.$message.error(response.data.msg.info);
              }
          })

          //普通外呼任务
          axios.get('/api/plan-market/call/task/center?urgency='+this.urgency)
          	.then(response => {
          		if(response.data.msg.code == 0){
                that.leftShow = response.data.data.single.length>0 ? true : false
                that.myTask = response.data.data.single
                for(var i in that.myTask){
                  that.myTask[i].my_done =  that.myTask[i].my_done ? that.myTask[i].my_done : that.myTask[i].done
                  that.myTask[i].my_count =  that.myTask[i].my_count ? that.myTask[i].my_count : that.myTask[i].count
                  that.myTask[i].isEnd = new Date(that.myTask[i].end_time).getTime() - new Date().getTime() < 0 ? true : false
                }

                that.orderList = response.data.data.single

                that.taskAll = response.data.data.order.concat(response.data.data.all)
                // this.fixedList = response.data.data
                // this.fixedList = response.data.data
                that.loading = false
          		}else{
          			that.$message.error(response.data.msg.info);
          		}
          })
      },
      toCallOrder(id){
        this.$router.push({
          path: "/callsystem/callOrder",
          query: { id: id }
        });
      },
      toCall(id){
        this.$router.push({
          path: "/callsystem/callOut",
          query: { id: id }
        });
      }
		}
	}
</script>

<style lang="scss" scoped>
  .taskcenter {
    margin: 0;
    padding: 0;
    background: #efefef;
    .zhu{ color:#1989FA;}
    .center {
      min-width: 1366px;width: 1366px;margin: 0 auto;display: flex;justify-content: space-between; min-min-width: 1366px;width: 1366px;
      .right {
        flex-basis: 1366px;background: #ECECEC;color: #646464;
        .topTag{display: flex;background: #fff;position: relative;border-bottom: #e2e0e3 1px solid;
          .topLogo{ font-size: 20px; color: #707070;display: flex;align-items: center;padding: 14px 0;
            img{ width: 30px;height: 30px;margin: 0 10px;}
          }
          .powertop{ display: flex; width: 100%;position: absolute;justify-content: center;}
          .powertopli{ cursor: pointer;flex-basis: 120px; line-height: 50px;padding-top: 5px; border-bottom: 3px #fff solid; color: #707070; font-size: 18px; text-align: center;}
          .powertopact{border-bottom: 3px #4D4D4D solid;font-weight: bold;}
        }
        .real-data{
          display: flex;
          .real-time-data{
            padding: 21px 27px;background: #fff;flex: 1;
            .t-box{
              display: flex;align-items: center;justify-content: space-between;
              .title{display: inline-flex;;font-size:18px;font-weight:bold;}
            }
            .flex{
              display: flex;justify-content: space-around;align-items: center;
              .data-box{
                height: 80px;padding: 20px;display: flex;flex-direction: column;justify-content: space-around;align-items: center;
                .tit{font-size: 14px;}
                .num{font-size: 20px;color: #FF4040;}
              }
            }
          }
          .right-box{
            display: flex;align-items: center;background: #F5F5F5;
            .order-icon{width:46px;height:46px;}
            .data-box{width: 200px;height: 80px;display: flex;flex-direction: column;justify-content: space-around;align-items: center;cursor: pointer;}
          }
        }
        .view{
          display: flex;background: #fff;
          .el-button--danger{padding: 6px 14px !important;}
          .title{border-bottom: 1px solid #eaeaea;line-height: 45px;padding-left: 30px;font-size: 16px;background: #f9f9f9;}
          .content{
            padding: 18px;max-height: 600px;overflow: auto;
          }
          .oh{overflow: hidden;width:200px;height: 22px;line-height: 22px;}

          .left-view{
            width: 33%;font-size: 14px;
            .task{
              box-shadow: 0 2px 4px rgba(0,0,0,.16);padding: 10px;border-radius: 4px;margin-bottom: 10px;
              .tit{color: #FFA251;margin-bottom: 8px;}
              .msg-box{
                display: flex;justify-content: space-between;align-items: center;font-size: 16px;
                .msg-btn{
                  .el-button.is-round{font-size: 14px;padding: 6px 14px;}
                }
              }
              .progress{color: #A1A1A1;}
              .endTime{display: flex;justify-content: flex-end;}
              .red{color: #DD2727;}
            }
          }
          .right-view{
            flex: 1;font-size: 14px;
            .task{
              display: flex;justify-content: space-between;align-items: center;box-shadow: 0 2px 4px rgba(0,0,0,.16);padding: 20px;border-radius: 4px;margin-bottom: 10px;
              .msg{font-size: 16px;}
              .msg-btn{
                .el-button.is-round{font-size: 14px;padding: 6px 14px;}
              }
            }
          }
        }
      }
    }

    /*滚动条样式*/
    .content::-webkit-scrollbar {/*滚动条整体样式*/
      width: 8px;     /*高宽分别对应横竖滚动条的尺寸*/
      height: 4px;
    }
    .content::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
      border-radius: 5px;
      -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
      background: #D8D8D8;
    }
    .content::-webkit-scrollbar-track {/*滚动条里面轨道*/
      -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
      border-radius: 0;
      background: #fff;
    }
  }
</style>
